<template>
  <div class="">
    <navigate :isVisibleBack="false">测评中心</navigate>
    <div class="content_box">
      <div class="evaluate_box">
        <img src="@/assets/images/evaluate/book.png" alt="" class="book_img" />
        <div class="user_info">
          <div class="name">用户李雪，欢迎您！</div>
          <div class="desc">TESTING CENTRE</div>
        </div>
        <div class="txt_desc">您还有待完成的任务：</div>
        <div class="quantity">
          <span class="num">15</span>
          <span class="unit">个</span>
        </div>

        <!-- 测评盒子 -->
        <div class="evaluate_sort">
          <div
            class="item_evaluate"
            v-for="(item, index) in evaluateArr"
            :key="index"
            @click="toEvaluationPage(item, path)"
          >
            <img :src="item.icon" class="evaluate_icon" />
            <span class="evaluate_txt">{{ item.txt }}</span>
          </div>
        </div>
      </div>

      <!-- 测评报告 -->
      <div class="report_box">
        <div class="tit_head">
          <img src="@/assets/images/evaluate/line_icon.png" alt="" />
          <span>测评报告</span>
        </div>
        <div class="report_type">
          <div
            class="item_type"
            v-for="(item, index) in reportArr"
            :key="index"
          >
            <div class="report-tit">{{ item.txt }}</div>
            <div class="report_num">共15份</div>
            <img :src="item.icon" alt="" class="report_img" />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      evaluateArr: [
        {
          txt: "自我测评",
          icon: require("@/assets/images/evaluate/evaluation_01.png"),
          path: "/evaluteList",
        },
        {
          txt: "任务测评",
          icon: require("@/assets/images/evaluate/evaluation_02.png"),
          path: "/evaluteList",
        },
        {
          txt: "问卷测评",
          icon: require("@/assets/images/evaluate/evaluation_03.png"),
        },
      ],
      reportArr: [
        {
          txt: "自我测评报告",
          icon: require("@/assets/images/evaluate/report_01.png"),
        },
        {
          txt: "任务测评报告",
          icon: require("@/assets/images/evaluate/report_02.png"),
        },
        {
          txt: "问卷测评报告",
          icon: require("@/assets/images/evaluate/report_03.png"),
        },
        {
          txt: "无线测评报告",
          icon: require("@/assets/images/evaluate/report_04.png"),
        },
      ],
    };
  },
  methods: {
    toEvaluationPage(path) {
      if (path) {
        this.$router.push(path);
      }
    },
  },
};
</script>

<style lang="less" scoped>
// @import "./css/index.less";
.content_box {
  padding: 0 10px;
}

.evaluate_box {
  position: relative;

  background: #ffffff;
  border-radius: 7px;
}

.book_img {
  position: absolute;
  top: 25.33px;
  right: 26.67px;
  width: 98px;
  height: 108px;
}

.evaluate_box .user_info {
  width: 100%;
  height: 77.33px;
  background: #00aeff;
  border-radius: 10px 10px 0px 0px;
  color: #ffffff;
  font-size: 10px;
  padding: 21.33px 0 0 16.33px;
}

.evaluate_box .name {
  line-height: 15.67px;
  margin-bottom: 11.33px;
  font-size: 15.33px;
  font-weight: bold;
}

.txt_desc {
  height: 12.67px;
  font-size: 12.67px;
  font-weight: bold;
  color: #000000;
  margin: 11.33px 0 13.33px 16px;
}

.quantity {
  margin-left: 16px;
  font-weight: bold;
  color: #333333;
}

.quantity .num {
  font-size: 26.67px;
  margin-right: 9.33px;
}

.quantity .unit {
  font-size: 12px;
}

//测评分类
.evaluate_sort {
  display: flex;
  justify-content: space-between;
  padding: 0 10px 15px 10px;
  margin-top: 12.33px;
}

.item_evaluate {
  position: relative;
  width: 98.67px;
  height: 70px;
}

.evaluate_icon {
  width: 98.67px;
  height: 70px;
}

.evaluate_txt {
  position: absolute;
  bottom: 9.33px;
  left: 50%;
  transform: translate(-50%);
  font-size: 12px;
  color: #ffffff;
}

//测评报告
.report_box {
}

.tit_head {
  margin-left: 06.67px;
}

.tit_head img {
  width: 5.33px;
  height: 15.33px;
}

.tit_head span {
  font-size: 15.33px;
  font-weight: bold;
  color: #333333;
  margin-left: 9.67px;
}

.report_type {
  display: flex;
  flex-wrap: wrap;
  margin-top: 19px;
  margin-bottom: -6.67px;
}

.item_type {
  position: relative;

  width: 166.67px;
  height: 93.33px;

  background: #ffffff;
  border-radius: 6.67px;
  color: #333333;
  padding: 16px 0 0 13.33px;
  margin: 0 6.67px 6.67px 0;
}

.report-tit {
  margin-bottom: 9.67px;
  font-size: 14.67px;
}

.report_num {
  opacity: 0.4;
  font-size: 12px;
}

.report_img {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 54px;
  height: 64px;
}
</style>
